﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeBehind="mapmode.aspx.cs" Inherits="HYSoft.Web.mapmode1" %>

<%@ Register Src="~/Controls/menu.ascx" TagName="Menus" TagPrefix="uc3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title></title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
    <style type="text/css">
        .main
        {
            width: 100%;
            height: 700px;
            background-color: rgba(185, 188, 194, 0.88);
        }
        .toplogo
        {
            margin-left: auto;
            margin-right: auto;
        }
        .search
        {
            margin-left: 40%;
        }
        .context
        {
            margin-left: auto;
            margin-right: auto;
            width: 1140px;
            height: 685px;
            background: white;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contentPlaceHolderMenu" runat="server">
    <uc3:Menus ID="Menu1" runat="server" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="contentPlaceHolderMain" runat="server">
    <div class="main">
        </br>
        <div class="context">
            <div class="toplogo">
                <img src="Images/top.PNG" /></div>
            <%--<asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" RenderMode="Inline" UpdateMode="Conditional">
                <ContentTemplate>--%>
                    <div class="search">
                        地图中心监测点：<asp:DropDownList ID="DropDownList2"  runat="server" 
                            AutoPostBack="true">
                        </asp:DropDownList>
                        <b style="color: red">*</b></div>
                    <br>
                    <br>
                    <br></br>
                    <div ID="dituContent" style="width: 900px; height: 400px; border: #ccc solid 1px; margin-left: auto;margin-right: auto;">
                    </div>
                    </br>
                    </br>
                <%--</ContentTemplate>
            </asp:UpdatePanel>--%>
            </br></br>
        </div>
    </div>
    <script type="text/javascript">

    function initMap() {
        createMap(); 
        setMapEvent();
        addMapControl(); 
        addMarker(); 
    }


    function createMap() {
        var map = new BMap.Map("dituContent"); 
        var point = new BMap.Point(<%=map_center()%>); 
        map.centerAndZoom(point, 16); 
        window.map = map; 
    }


    function setMapEvent() {
        map.enableDragging();
        map.enableScrollWheelZoom(); 
        map.enableDoubleClickZoom(); 
        map.enableKeyboard(); 
    }


    function addMapControl() {
    
        var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        
        //var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
        //map.addControl(ctrl_ove);
        
        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }

 
    var markerArr = [<%=map_data()%>];

    function addMarker() {
        for (var i = 0; i < markerArr.length; i++) {
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0, p1);
            var iconimg = createIcon(json.icon);
            //var icon = new BMap.Icon('mypoint.png', new BMap.Size(20, 32), {    anchor: new BMap.Size(10, 30),infoWindowAnchor: new BMap.Size(10, 0)});
            var marker = new BMap.Marker(point, { icon: iconimg });
            var iw = createInfoWindow(i);
            //var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
            var label = new BMap.Label("<a target='_blank'  href='" + markerArr[i].url + "' style='color:" + markerArr[i].title + "</a><br/>", { "offset": new BMap.Size(10, -20) });        
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                borderColor: "#808080",
                color: "#333",
                cursor: "pointer"
                
            });

            (function () {
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;

                _iw.addEventListener("open", function () {
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close", function () {
                    _marker.getLabel().show();
                })
                //label.addEventListener("click",function(){ _marker.openInfoWindow(_iw);})
                if (!!json.isOpen) {
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }

    function createInfoWindow(i) {
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
        return iw;
    }

    function createIcon(json) {
        var icon = new BMap.Icon("http://openapi.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })
        return icon;
    }

    initMap(); 
    </script>
</asp:Content>
